<table id="gameBoard">
	<tr class="row">
		<td class="box" id="box0">${myBoard.boxes[0]}</td>
		<td class="box" id="box1">${myBoard.boxes[1]}</td>
		<td class="box" id="box2">${myBoard.boxes[2]}</td>
	</tr>
	<tr class="row">
		<td class="box" id="box3">${myBoard.boxes[3]}</td>
		<td class="box" id="box4">${myBoard.boxes[4]}</td>
		<td class="box" id="box5">${myBoard.boxes[5]}</td>
	</tr>
	<tr class="row">
		<td class="box" id="box6">${myBoard.boxes[6]}</td>
		<td class="box" id="box7">${myBoard.boxes[7]}</td>
		<td class="box" id="box8">${myBoard.boxes[8]}</td>
	</tr>
</table>
<div><a id="showStatus" href="#">GetStatus</a></div>
<div><a id="startNew" href="#">New Game</a></div>
<div id="status"></div>
<script type="text/javascript" charset="utf-8">
	$(".box").click(function (){
		var boxId = $(this).attr('id');
		$.post( '@{playerMove()}', {playerMove: boxId.substr(boxId.length - 1)}  ,function(data) {
			drawBoardStatus(data);
		} )
	});

	$('#showStatus').click(function() {
		$.get( '@{showStatus()}', function(data) {
			var s="";
			for(i=0; i<data.length;i++) {
				s += "<p>Box " + i + " = " + data[i] + "</p>";
			}
			document.getElementById("status").innerHTML=s;
		})
	});

	$('#startNew').click(function() {
		$.get( '@{startNewGame()}', function(data) {
			drawBoardStatus(data);
		})
	});

</script>

